import styled from 'styled-components';

export const Mytitle = styled.div`
  /* 以前css 怎么写样式, 该处就怎么写样式 */
  font-size: 30px;
  color:red
`

export const Mycss = styled.div`
   border:1px solid red;
   background-color: yellow;
`

/*  继承上面的mycss 样式 */
// 继承如上的Mycss 样式
// 注意: 如果当前样式和继承的样式有同名属性样式, 以当前样式为准, 就近原则
export const Mycss1 = styled(Mycss)`
  font-size: 50px;
  border:5px solid green;
`

/* 样式的属性传递 */
// props 为接收要的属性对象
/*结构为 {background1: 'green', children: '测试样式3', className: undefined, theme: {…}} */

export const Mycss2 = styled.div`
   color:deeppink;
   font-size: 30px;
   background-color: ${(props) => props.background1 || 'black'};
`

